page-cook-book {
    .list-ios .item-block .item-inner {
      border: none;
    }
    .cookbook{
        width: 100%;
        .container{
          width: 100%;
        }
        table{
            width: 100%;
            border: 1px solid #a79b9b61;
            text-align: center;
            margin-bottom: 15px;
        }
    }
    .cook_nb{
        background: #585858;
    }
    .cook_rq{
        background: #e42417de;
        font-weight: 700;
        color: #fff;
    }
    tr{
        line-height: 45px;
        height: 45px;
    }
    td{
        background: #fff;
        span{
            font-size: 16px;
        }
    }
    img{
        vertical-align: middle;
        height: 25px;
        cursor: pointer;
    }
    .scroll-content{
        background: #f2f5f7;
    }
    .icon-red{
      background: red;
    }
    .icon-ash{
      background: #999aaa;
    }
    .bar-buttons-ios[end] {
      width: 35px;
      height: 35px;
      text-align: center;
      margin-right: 10px;
    }
  
    .duty {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      height: 36px;
      background-color: #fff;
    }
  
    .duty-state {
      border: 1px solid #f8ac56;
      font-size: 1.3rem;
      border-radius: 4px;
      padding: 1px 4px;
      color: #f8ac56;
    }
  
    .duty div {
      width: 50%;
      text-align: center;
      position: relative;
      height: 36px;
      line-height: 36px;
    }
  
    .duty-title {
      position: relative;
      color: #e42417;
    }
  
    .duty-title::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 2px;
      background-color: #e42417;
      bottom: -10px;
      left: 0px;
    }
  
    .span-btn {
      background-color: #e42417;
      font-size: 1.4rem;
      padding: 4px 6px;
      color: #fff;
      border-radius: 3px;
    }
  
    .dutyItem > div {
      margin-bottom: 10px;
    }
  
    .daySpan {
      padding: 2px 20px;
      background-color: #e42417;
      color: #fff;
      border-bottom-right-radius: 5px;
    }
  
    .nightSpan {
      padding: 4px 20px;
      background-color: #4e5e6f;
      color: #fff;
      border-bottom-right-radius: 5px;
    }
  
    .duty-Obj .item-ios p {
      margin-bottom: 15px;
    }
  
    .duty-Obj .label-ios {
      margin: 0;
    }
  
    .duty-Obj {
      .item-ios.item-block .item-inner {
        background-color: #f5f6f7;
      }
    }
  
    .room {
      padding: 15px;
      background-color: #fff;
    }
  
    .morning, .afternoon {
      display: flex;
  
      .morning-text, .afternoon-text {
        width: 20%;
        display: flex;
        align-items: center;
        font-weight: bold;
        padding-left: 15px;
      }
  
      .morning-room, .morning-room {
        width: 100%;
        padding: 10px 5px;
        min-height: 53px;
  
        span {
          display: inline-block;
          font-size: 1.5rem;
          border-radius: 4px;
          color: #474747;
          padding: 0 8px;
          margin-bottom: 8px;
          margin-right: 5px;
        }
      }
    }
  
    .morning + .afternoon {
      border-top: 1px solid #cccccc;
    }
  
    .already, .notYet {
      border: 1px solid #dddddd;
      border-radius: 3px;
      margin-bottom: 20px;
  
      p {
        background-color: #fff1f0;
        color: #e42417;
        padding: 6px 15px;
      }
    }
  
    .already {
  
      .morning {
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
      }
  
      .afternoon {
        border-bottom-right-radius: 8px;
        border-bottom-left-radius: 8px;
      }
    }
  
    .notYet {
      margin-top: 15px;
  
      .morning, .afternoon {
        .morning-room {
          span {
            background-color: #f2f2f2;
            border: 1px solid #f2f2f2;
            color: #666666;
          }
        }
      }
    }
  
    .duty-content {
      padding: 15px;
  
      ion-item {
        p {
          padding: 0 10px 0px 10px;
  
          span {
            color: #333333;
            font-weight: 500;
  
            span {
              color: #666666;
              font-weight: 400;
            }
          }
        }
  
      }
    }
  
    .apply {
      font-size: 1.4rem;
      border-radius: 5px;
  
      .apply-room {
        font-size: 1.4rem;
      }
  
      .meet-type {
        font-size: 1.4rem;
        margin-left: 20px;
  
        span {
          font-size: 1.4rem;
        }
      }
  
      .order-time {
        font-size: 1.4rem;
      }
    }
  
    .apply + .apply {
      margin-top: 8px;
    }
  
    .list-ios .item-block .item-inner {
      padding: 0;
    }
  
    .success {
      background-color: #2ec95c;
      color: #fff !important;
      padding: 3px 5px;
      display: inline-block;
      font-size: 1rem;
      border-radius: 4px;
    }
  
    .fab ion-icon {
      color: #e42417;
      font-size: 4rem;
    }
  
    .fab-ios-light {
      border: 1px solid #333333;
      width: 9rem;
      height: 9rem;
    }
  
    .fab-call {
      line-height: normal;
  
      p {
        color: #333333;
        font-size: 1rem;
      }
    }
  
    .loader {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -mos-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      text-align: center;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: default
    }
  
    .loader .text {
      position: absolute;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
      top: -4px;
      left: 10px;
      z-index: 5;
      font-size: 1em;
      font-weight: 900;
      text-transform: uppercase;
      white-space: nowrap;
      color: #333333;
    }
  
    .rotation {
      width: 50px;
      height: 50px;
      position: relative;
      overflow: hidden;
      background: #b9cbda;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -mos-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg)
    }
  
    svg {
      position: absolute;
      top: 0;
      left: 0
    }
  
    svg line {
      stroke-width: 10px;
      fill: none;
      stroke-dasharray: 200px
    }
  
    .rotation svg line.top {
      stroke: #db2f00;
      -webkit-animation: topline cubic-bezier(.75, 0, .5, 1) 1.5s infinite;
      -moz-animation: topline cubic-bezier(.75, 0, .5, 1) 1.5s infinite;
      -moz-animation: topline cubic-bezier(.75, 0, .5, 1) 1.5s infinite;
      -ms-animation: topline cubic-bezier(.75, 0, .5, 1) 1.5s infinite;
      -o-animation: topline cubic-bezier(.75, 0, .5, 1) 1.5s infinite;
      animation: topline cubic-bezier(.75, 0, .5, 1) 1.5s infinite
    }
  
    .rotation svg line.bottom {
      stroke: #db2f00;
      -webkit-animation: bottomline cubic-bezier(.75, 0, .5, 1) 1.5s infinite;
      -moz-animation: bottomline cubic-bezier(.75, 0, .5, 1) 1.5s infinite;
      -moz-animation: bottomline cubic-bezier(.75, 0, .5, 1) 1.5s infinite;
      -ms-animation: bottomline cubic-bezier(.75, 0, .5, 1) 1.5s infinite;
      -o-animation: bottomline cubic-bezier(.75, 0, .5, 1) 1.5s infinite;
      animation: bottomline cubic-bezier(.75, 0, .5, 1) 1.5s infinite
    }
  
    .rotation svg line.left {
      stroke: #13a3a5;
      -webkit-animation: leftline cubic-bezier(.75, 0, .5, 1) 1.5s infinite;
      -moz-animation: leftline cubic-bezier(.75, 0, .5, 1) 1.5s infinite;
      -moz-animation: leftline cubic-bezier(.75, 0, .5, 1) 1.5s infinite;
      -ms-animation: leftline cubic-bezier(.75, 0, .5, 1) 1.5s infinite;
      -o-animation: leftline cubic-bezier(.75, 0, .5, 1) 1.5s infinite;
      animation: leftline cubic-bezier(.75, 0, .5, 1) 1.5s infinite
    }
  
    .rotation svg line.right {
      stroke: #13a3a5;
      -webkit-animation: rightline cubic-bezier(.75, 0, .5, 1) 1.5s infinite;
      -moz-animation: rightline cubic-bezier(.75, 0, .5, 1) 1.5s infinite;
      -moz-animation: rightline cubic-bezier(.75, 0, .5, 1) 1.5s infinite;
      -ms-animation: rightline cubic-bezier(.75, 0, .5, 1) 1.5s infinite;
      -o-animation: rightline cubic-bezier(.75, 0, .5, 1) 1.5s infinite;
      animation: rightline cubic-bezier(.75, 0, .5, 1) 1.5s infinite
    }
  
  
    @keyframes topline {
      0% {
        transform: translateX(0px)
      }
      50% {
        transform: translateX(-200px)
      }
      100% {
        transform: translateX(-400px)
      }
    }
  
  
    @keyframes bottomline {
      0% {
        transform: translateX(0px)
      }
      50% {
        transform: translateX(200px)
      }
      100% {
        transform: translateX(400px)
      }
    }
  
  
    @keyframes leftline {
      0% {
        transform: translateY(0px)
      }
      50% {
        transform: translateY(200px)
      }
      100% {
        transform: translateY(400px)
      }
    }
  
    @keyframes rightline {
      0% {
        transform: translateY(0px)
      }
      50% {
        transform: translateY(-200px)
      }
      100% {
        transform: translateY(-400px)
      }
    }
  
    @keyframes text {
      0% {
        transform: scale(1, 1)
      }
      40% {
        transform: scale(1.4, 1.4)
      }
      70%, 100% {
        transform: scale(1, 1)
      }
    }
  
    .fab-ios-light {
      background-color: transparent;
      color: #ffffff;
      border: none;
    }
  
    .total {
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
  
      p {
        margin-bottom: 5px;
      }
    }
  }
  